<template>
  <div class="carousel-container" style="background-color: white;">
    <el-carousel height="400px" motion-blur>
      <el-carousel-item v-for="item in imageList" :key="item">
        <img :src="item.fileUrl" no-repeat style="object-fit: fill;height:100%; width:100%;" class="carousel-image"/>
      </el-carousel-item>
    </el-carousel>
  </div>

  <div style="text-align:center;height: 110px; margin: 0 auto; line-height: 100px" >
    <h1 style="font-size: 40px">校园拼课系统</h1>
  </div>

  <!-- 中间内容 -->
  <div class="middle-content">
    <!-- 左边小视频 -->
    <div class="video-section">
      <video controls autoplay loop muted width="100%">
        <source src="/video.mp4" type="video/mp4" />
        您的浏览器不支持视频播放。
      </video>
    </div>

    <!-- 右边系统文字介绍 -->
    <div class="intro-section">
      <el-text class="mx-1" size="large" tag="b">
        系统介绍<br>
      </el-text>
      <el-text class="mx-1">
        校园拼课系统是一个在线学习平台，学校的老师都会提供丰富的课程资源，帮助学生快速掌握各种技能。
        无论你是初学者还是进阶者，都能在这里找到适合自己的课程。<br>
        <br>
      </el-text>
      <el-text class="mx-1" size="large" tag="b">
        课程分类<br>
      </el-text>
      <el-text class="mx-1">
        我们的课程涵盖植物学、历史学、编程、设计、语言学习等多个领域，满足不同学生的需求。<br>
        <br>
      </el-text>
      <el-text class="mx-1" size="large" tag="b">
        课程意义<br>
      </el-text>
      <el-text class="mx-1">
        通过拼课系统，学生可以随时随地学习，提升自己的技能水平。
      </el-text>
    </div>
  </div>

  <div class="outer-box">
    <div style="text-align:center;height: 60px; margin: 0 auto; line-height: 1px" >
      <h1 style="font-size: 40px">名师优选</h1>
    </div>

    <div class="card-container">
      <!-- 生成8张卡片 -->
      <div v-for="i in tableData" :key="i" class="flip-card">
        <div class="flip-card-inner">
          <!-- 正面：图片 -->
          <div class="flip-card-front">
            <img :src="i.fileUrl" alt="图片" style="width: 100%; height: 100%; object-fit: cover;" />
          </div>

          <!-- 背面：文字 -->
          <div class="flip-card-back">
            <h3>{{ i.teacherName }}</h3>
            <p>{{ i.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div style="text-align:center;height: 110px; margin: 0 auto; line-height: 100px" >
    <h1 style="font-size: 40px"></h1>
  </div>


  <div class="blue-rectangle">
    <img src="@/assets/htuLogo.png" alt="Logo" class="footer-image" />
    <!-- 联系方式 -->
    <div class="contact-info">
      <p>电话: 123-456-7890</p>
      <p>邮箱: info@example.com</p>
    </div>
    <!-- 嵌入的文字链接 -->
    <div class="footer-text">
      <span @click="goToPage('courses')">所有课程</span>
      <span @click="goToPage('course')">我的课程</span>
      <span @click="goToPage('chat')">讨论区</span>
      <span @click="goToPage('about')">关于我们</span>
      <span @click="goToPage('home')">帮助中心</span>
    </div>
  </div>
</template>



<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import carouseApi from "@/api/module/carousel";
import router from "@/router";

let tableData = ref([]);

// Dom 挂载之后
onMounted(() => {
  getPictureList();
  getTeacherList();
})

const imageList = ref(
    {}
);

const getTeacherList = async () => {
  const res = await carouseApi.famous();
  tableData.value = res.data.records;
  tableData.value.forEach(item => {
    item.fileUrl = item.fileUrl?'http://localhost:18000/course/famous/preview/' + item.fileUrl:null
  })
}

//获取图片列表
const getPictureList = async () => {
  const res = await carouseApi.list();
  imageList.value = res.data;
}

// 点击跳转逻辑
const handleClick = (path) => {
  router.push(path);
};

// 跳转到指定页面
const goToPage = (pageName) => {
  router.push({ name: pageName });
};
</script>



<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.carousel-image {
  background-color: white; /* 设置背景为白色 */
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 30px; /* 添加圆弧形边框 */
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.middle-content {
  display: flex;
  margin: 20px 0;
}

.video-section {
  flex: 1;
  margin-right: 20px;
}

.intro-section {
  flex: 1;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 5px;
  white-space: pre-line; /* 允许换行 */
  line-height: 2; /* 调整行高为 2 倍 */
}

.grid-card h3 {
  margin: 0 auto;
  //margin: 30px 0;
}

.grid-card p {
  color: #666;
}

.carousel-container {
  border-radius: 30px; /* 设置圆角 */
  overflow: hidden; /* 确保内容不会溢出圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 可选：添加阴影效果 */
}


/* 卡片容器 */
.card-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 三列 */
  grid-template-rows: repeat(2, 1fr); /* 两行 */
  gap: 30px; /* 卡片之间的间距 */
  max-width: 1000px; /* 限制容器宽度 */
  margin: 0 auto; /* 居中 */
}

/* 卡片样式 */
.flip-card {
  width: 100%;
  height: 260px;
  perspective: 1000px; /* 3D透视效果 */
}

/* 卡片内部容器 */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s; /* 翻转动画 */
  transform-style: preserve-3d; /* 保持3D效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}

/* 鼠标悬停时翻转 */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg); /* Y轴旋转180度 */
}

/* 正面和背面共用样式 */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面 */
}

/* 正面样式 */
.flip-card-front {
  background-color: #fff;
}

/* 背面样式 */
.flip-card-back {
  background-color: #80c7ff;
  transform: rotateY(180deg); /* 初始状态为背面 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*
底部照片+文字跳转样式
 */
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保页面高度占满整个视口 */
}

.main-content {
  flex: 1; /*  */
  padding: 20px;
}

.blue-rectangle {
  width: 100%;
  height: 200px; /* 矩形框高度 */
  background-color: #80c7ff; /* 天蓝色 */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 阴影 */
  gap: 80px; /* 图片和文字之间的间距 */
}

.footer-image {
  width: 140px; /* 图片宽度 */
  height: 140px; /* 图片高度 */
  border-radius: 50%; /* 圆形图片 */
  object-fit: cover; /* 图片填充方式 */
}

.footer-text {
  display: flex;
  gap: 20px; /* 文字链接之间的间距 */
}

.footer-text span {
  font-size: 18px;
  color: #fff; /* 文字颜色 */
  cursor: pointer;
  transition: color 0.3s;
}

.footer-text span:hover {
  color: #409eff; /* hover 时的文字颜色 */
}

/*
卡片加一个大框
 */
.outer-box {
  width: 100%;
  box-sizing: border-box; /* 确保 padding 和 border 包含在宽度内 */
  padding: 20px; /* 内边距 */
  border: 2px solid #409eff; /* 边框 */
  border-radius: 12px; /* 圆角 */
  background-color: #f0f8ff; /* 背景颜色 */
  margin-top: 100px; /* 与上方内容的间距 */
  overflow-x: hidden; /* 隐藏横向溢出内容 */
}
</style>